<template>
  <div class="app-container">
    <el-carousel
      :interval="5000"
      arrow="always"
      height="400px"
      v-if="rotationList && rotationList.length"
    >
      <el-carousel-item v-for="(item, index) in rotationList" :key="index">
        <el-image
          :src="`${item.imgUrl}`"
          fit="cover"
          :style="`width:100%;height:100%;background: #d3dce6;border-radius:8px;`"
        >
        </el-image>
      </el-carousel-item>
    </el-carousel>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>{{ $t("notification") }}</span>
        <el-button
          @click="toMsgDeatail"
          style="float: right; padding: 3px 0"
          type="text"
          v-if="informationList.length"
          >{{ $t("view") }}<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </div>
      <el-table
        :data="informationList"
        :show-header="false"
        :row-class-name="rowStyle"
        border
        :max-height="tableHeight"
      >
        <el-table-column
          :label="$t('content')"
          prop="content"
          :show-overflow-tooltip="true"
        />
        <el-table-column :label="$t('creation_time')" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="标题" align="center" prop="headline" :show-overflow-tooltip="true" /> -->

        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" :style="{color:scope.row.state==1?'#999':''}"
              @click="handleView(scope.row)">查看详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { listAdvertising } from "@/api/custom/advertising";
import { listInformation } from "@/api/custom/information";
export default {
  name: "Index",
  data() {
    return {
      rotationList: [],
      informationList: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      listAdvertising({
        pageNum: 1,
        pageSize: 5,
      }).then((res) => {
        this.rotationList = res.data.records.map((item) => {
          item.imgUrl = process.env.VUE_APP_BASE_API + item.picture;
          return item;
        });
      });

      listInformation({
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.informationList = res.data.records;
        // this.informationList = [{
        //     forwardingDate: "2023-07-03:11:11:11",
        //     headline: "请假",
        //     content: "XXX请假申请",
        //     state: "1",
        //   },
        //   {
        //     forwardingDate: "2023-07-03:11:11:11",
        //     headline: "请假",
        //     content: "XXX请假申请",
        //     state: "0",
        //   },
        // ];
      });
    },
    rowStyle({ row, rowIndex }) {
      if (row.state == 0) {
        return "unread_class";
      } else {
        return "read_class";
      }
    },
    toMsgDeatail() {
      this.$router.push({ path: "information" });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-table .unread_class {
  color: #000000;
}

::v-deep .el-table .read_class {
  color: #999999;
}
</style>
